<template>
	<section>
		<!--工具条: 高级查询和新增-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="keyword" placeholder="请输入关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="keywordQuery">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--分页列表-->
    <!--
  :data="permissions" - 列表数据
  highlight-current-row - 当前行高亮
  v-loading="listLoading" - 加载框
  @selection-change="selsChange" - 批量操作要使用的方法
-->
    <el-table :data="permissions" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>

      <el-table-column prop="name" label="名称" width="300">
      </el-table-column>
      <el-table-column prop="url" label="路径" width="300">
      </el-table-column>
      <el-table-column prop="sn" label="方法">
      </el-table-column>
		</el-table>

    <!--工具条：批量删除和分页栏-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-size="pageSize" :total="totals" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
	export default {
		data() {
			return {
        //1.分页查询相关数据
        permissions: [],      //分页数据
        listLoading: false,   //加载框
        totals: 0,            //总数量
        currentPage: 1,       //当前页
        pageSize: 5,          //每页显示的条数

        //2.高级查询
        keyword: '',
      }
    },
    //自定义方法
		methods: {
		  //1.分页查询,获取部门列表
      getPermissions() {
        //组装参数
        let para = {
          //分页
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          //高级查询
          keyword: this.keyword,
        };
        //显示加载框
        this.listLoading = true;
        //发送异步请求
        this.$http.post("/permission",para).then(res=>{
          this.totals = res.data.totals;
          this.permissions = res.data.data;
          //隐藏加载框
          this.listLoading = false;
        }).catch(res=>{
          this.$message.error("网络繁忙,请稍后重试!")
        })
      },

      //2.点击分页的方法
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getPermissions();
      },

      //3.高级查询的方法
      keywordQuery(){
        this.currentPage = 1;
        this.getPermissions();
      },
		},
		mounted() {
			this.getPermissions();
		}
	}

</script>

<style scoped>

</style>